<template>
  <div class="List">
    <!-- 显示热门数据 -->
      <div class="hot">热门</div>
    <div class="hotCities">
        <div class="city" v-for="city,key in hotCities" :key="key" @click="cityClick(city)">
          {{ city.cityName }}
        </div>
    </div>
    <!-- 显示列表数据 -->
    <van-index-bar  :sticky="false" :index-list="IndexList" class="van-index-bar">
     <template v-for="item,key in cityData" :key="key">
      <van-index-anchor :index="item.group"/>
      <template v-for="city,key in item.cities" :key="key" >
        <van-cell :title="city.cityName" @click="cityClick(city)" />
      </template>
     </template>
    </van-index-bar>
  </div>
</template>


<script setup>
import { computed } from 'vue';
const props = defineProps({
  cityData: {
    type: String,
    default: {},
  },
  hotCities: {
    type: Object,
    default: {},
  },
});

//动态索引
const IndexList = computed(() =>
{
    const lists = props.cityData.map(item => item.group);
    lists.unshift("#");
    return lists;
})


//点击回显
//获取当前路由
import {useRouter} from 'vue-router'
import useCityStore from '../../../stores/modules/cityStore';
const router = useRouter();
//获取pinia
const store = useCityStore();
function cityClick(city)
{
     //改变当前城市
    store.currentCity = city;
    //返回
    router.back();
}

 
</script>



<style lang="less" scoped>

.hot
{
     margin-left:10px ;
     color: #999;
}
.hotCities
{
    display: flex;
    flex-wrap: wrap;
    flex-shrink:0;
    justify-content: space-around;
    margin: 10px;
    margin-right: 30px;
    .city
    {
        width: 15%;
        height: 30px;
        background-color:#ff9854;
        border: solid 1px #ff9854;
        text-align: center;
        line-height: 30px;
        border-radius:10px;
        margin: 10px;
    }

}

 
</style>